<template>
  <div class="form-view-row">
    <label>{{ field.displayName }}</label>
    <div class="form-view-row-content form-subform-view">
      <!-- start 子表单表格 -->
      <el-table
        v-if="columns.length"
        :data="subformFieldsValues"
        :highlight-current-row="false"
        header-row-class-name="common-list-table-header__v2"
        ref="multipleTable"
        border
      >
        <el-table-column type="index" width="50" :label="$t('common.base.SN')" />
        <el-table-column
          v-for="(column, index) in columns"
          :key="`${column.field}_${index}`"
          :label="column.label"
          :prop="column.field"
          :width="column.width"
          :min-width="column.minWidth || '120px'"
          :show-overflow-tooltip="column.field !== 'name'"
          :align="column.align"
        >
          <template slot-scope="scope">
            <!-- start 附件 -->
            <template v-if="column.formType === 'attachment'">
              <template v-if="scope.row[column.field] && scope.row[column.field].length">
                <el-button type="text" size="small" @click="handleAttachmentView(column, scope.row[column.field])">{{ $t('common.base.view') }}</el-button>
              </template>
            </template>
            <!-- end 附件 -->

            <template v-else>
              {{ $formatFormField(column, scope.row) }}
            </template>
          </template>
        </el-table-column>
      </el-table>
      <!-- end 子表单表格 -->

      <form-attachment-view-dialog ref="attachmentView" />
    </div>
  </div>
</template>

<script>
/* util */
import * as FormUtil from '@src/component/form/util';
/* components */
import FormAttachmentViewDialog from '@src/component/form/common/components/FormAttachmentViewDialog.vue';

const TABLE_FILTER_COLUMNS = [
  // 'attachment',
  'separator',
  'info',
  'autograph',
  'location'
];
export default {
  name: 'form-subform-view',
  components: {
    FormAttachmentViewDialog,
  },
  props: {
    field: {
      type: Object,
      default: () => ({})
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    columns() {
      let columns = this.fields.filter(
        item => !TABLE_FILTER_COLUMNS.includes(item.formType)
      );

      columns.map(field => {
        field.label = field.displayName;
        field.field = field.fieldName;
      });
      return columns;
    },
    // 子表单数据(过滤隐藏字段)
    fields() {
      let { subFormFieldList = [] } = this.field || {};
      return subFormFieldList.filter(f => FormUtil.isVisibleField(f));
    },
    subformFieldsValues() {
      return this.value || [];
    }
  },
  methods: {
    /* 查看附件详情 */
    handleAttachmentView(field, value) {
      this.$refs.attachmentView.open(field, value);
    },
  },
};
</script>
